<template>
  <base-option :selected="selected" :field-config="fieldConfig" :form-config="formConfig">
    <template #default="{ hideOptions }">
      <el-form-item v-if="fieldConfig.defaultValue !== undefined && hideOptions('defaultValue')" label="默认值">
        <el-date-picker
          v-model="fieldConfig.defaultValue"
          :type="fieldConfig.type"
          :format="format"
          :value-format="format"
        />
      </el-form-item>
      <el-form-item v-if="fieldConfig.type !== undefined && hideOptions('type')" label="显示类型">
        <el-select v-model="dateType">
          <el-option label="年" value="year,YYYY" />
          <el-option label="年-月" value="month,YYYY-MM" />
          <el-option label="年-月-日" value="date,YYYY-MM-DD" />
          <el-option label="年-月-日 时:分" value="datetime,YYYY-MM-DD HH:mm" />
          <el-option label="年-月-日 时:分:秒" value="datetime,YYYY-MM-DD HH:mm:ss" />
        </el-select>
      </el-form-item>
    </template>
  </base-option>
</template>

<script setup>
import { ref, toRefs, computed, watch } from 'vue'
import baseOption from './base-option.vue'
import propsDefinition from './props'
const props = defineProps(propsDefinition)
const { selected, fieldConfig, formConfig } = toRefs(props)

const dateType = ref('')

watch(dateType, (val) => {
  const arr = val.split(',')
  fieldConfig.value.type = arr[0]
  fieldConfig.value.format = arr[1]
})

watch(
  selected,
  () => {
    const arr = [fieldConfig.value.type || 'date', fieldConfig.value.format || 'YYYY-MM-DD']
    dateType.value = arr.join(',')
  },
  { immediate: true }
)

const format = computed(() => {
  if (fieldConfig.value.format) {
    return fieldConfig.value.format
  }
  return 'YYYY-MM-DD'
})
</script>
